<template>
  <view>
    <view>
      <swiper style="height: 750rpx;" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
              :interval="interval" :duration="duration">
        <view v-for="(item, index) in banners" :key="item.id">
          <swiper-item>
            <view style="width: 750rpx;height: 750rpx;">
              <image :src="imgPrex+item.url" style="width: 100%;height: 100%"/>
            </view>
          </swiper-item>
        </view>
      </swiper>
    </view>
    <view class="content">
      <view class="good_info">
        <view class="money">
          <view class="money_now">
            <view style="font-size: 30rpx; color: red;">¥</view>
            <view style="font-size: 60rpx;color: red;">{{ goodInfo.nowPrice }}</view>
          </view>
          <view class="money_before">
            <view style="font-size: 28rpx; color: #d6d6d6;">¥</view>
            <view style="font-size: 28rpx;color: #d6d6d6;text-decoration: line-through;">{{ goodInfo.price }}
            </view>
          </view>
          <view class="maile">已售{{ goodInfo.mai }}</view>
        </view>
        <view class="desc">
          <view class="desc_icon">
            <image src="../../static/desc_icon.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="desc_title">{{ goodInfo.name }}</view>
        </view>
      </view>
      <view style="height: 20rpx;background-color: #d6d6d6;width: 100%;"></view>
    </view>
    <view style="width: 750rpx;height: 360rpx;">
      <image src="../../static/p_title.jpg" style="width: 100%;height: 100%;"></image>
    </view>
    <view class="content">
      <!-- 商品介绍 -->
      <view class="jieshao">
        <!--
        <view style="display: flex;justify-content: start;align-items: center;margin-left: 10rxp;margin-top: 26rpx; border: solid 1rpx red;">
          <view style="width: 8rpx;height: 34rpx;margin-left: 25rpx;margin-top: 10rpx;">
            <image src="../../static/tuijian_icon.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view style="margin-left: 16rpx;font-weight: 600;margin-top: 8rpx;font-size:34rpx;">详情</view>
        </view>
        -->
        <!--分享功能开始-->
        <view class="share_view">
          <button class="share_bt" open-type="share">按钮</button>
          <image class="share_img" src="../../static/121.png"></image>
        </view>
        <!--分享功能结束-->
        <view class="content">
          <mp-html :content="goodInfo.info"/>
        </view>
      </view>
    </view>
    <view style="width: 750rpx;height: 263rpx;">
      <image src="../../static/p_foot.jpg" style="width: 100%;height: 100%;"></image>
    </view>
    <!-- 底部导航区域-->
    <view class="bottom_nav">
      <view style="height: 42rpx; width: 24rpx;margin-left: 250rpx;margin-top: 20rpx;" @click="navback">
        <image src="../../static/good_left.png" style="width: 100%;height: 100%;"></image>
      </view>
      <view style="height: 42rpx; width: 24rpx;margin-left: 200rpx;margin-top: 20rpx;" @click="navback">
        <image src="../../static/good_right.png" style="width: 100%;height: 100%;"></image>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
import request from '../../utils/request.js'
import config from '../../utils/config.js'

export default {
  data() {
    return {
      background: ['color1', 'color2', 'color3'],
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 800,
      showOverlay: false, // 控制遮罩层显示的变量
      banners: null,
      goodInfo: null,
      imgPrex: config.imgPrefx
    }
  },
  onLoad(option) {
    console.info("页面切换时传递的信息：", option)
    this.id = option.id;
    this.queryInfo()
  },
 onShareAppMessage(res) {
	  var _this = this;
   let pages = getCurrentPages(); //获取当前页面栈的信息
   let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
     if (res.from === 'button') {// 来自页面内分享按钮
       console.log(res.target)
     }
     return {
       title: _this.goodInfo.name,
       path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
     }
   },
   onShareTimeline(res) {
	   var _this = this;
	  
     let pages = getCurrentPages(); //获取当前页面栈的信息
     let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
       if (res.from === 'button') {// 来自页面内分享按钮
         console.log(res.target)
       }
       return {
         title: _this.goodInfo.name,
         path: currentPage.route + `?id=${this.id}&share=${this.share}`, //后面是路径上要传递的参数
		 imageUrl:_this.imgPrex + _this.banners[0].url
       }
     },
  methods: {
    queryInfo() {
      let _this = this;
      request({
        url: '/app/v1/good/info?id=' + _this.id,
        method: "GET",
      }).then(res => {
        if (200 == res.code) {
          // 轮播图数组
          _this.banners = res.data.urls;
          // 商品详情介绍
          _this.goodInfo = res.data.miniGood;
        } else {
          console.error('查询商品详情');
        }
      })
    },
    chooseStyle(event) {

    },
    navback() { // 返回上一路由
      // 返回上一页面，可以通过getCurrentPages获取当前页面栈，back()返回
      let pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack();
      } else {
        // 如果已经是首页，不可再返回，可以选择返回首页或者关闭应用
        uni.switchTab({
          url: '/pages/index/index' // 假设首页路径是/pages/index/index
        });
      }
    }
  }
}
</script>
<style>
/** 设置整个页面的背景色为白色 **/
page {
  background-color: #fff;
}

.share_view {
  display: flex;
  position: fixed;
  right: 40rpx;
  top: 936rpx;
  justify-content: center;
  align-items: center;
  margin-left: 420rpx;
  z-index: 999;
}

.share_img {
  width: 100rpx;
  /* 或者你需要的尺寸 */
  height: 100rpx;
  /* 或者你需要的尺寸 */
  margin-left: -90rpx;
}

.share_bt {
  margin-left: 10rpx;
  /* 将按钮稍微向右偏移，以便于叠加在图片上 */
  width: 70rpx;
  height: 70rpx;
  background-color: transparent;
  border: none;
  opacity: 0;
  /* 设置按钮的透明度为50% */
}

.forward {
  width: 60rpx;
  height: 60rpx;
  border: none !important;
  background-color: transparent;
  /* 按钮背景透明 */
  outline: none;
  /* 去除点击后的轮廓 */
}

/** 底部导航按钮 **/
.bottom_nav {
  display: flex;
  width: 100%;
  height: 150rpx;
  background-color: white;
  border-top: solid 1rpx #d6d6d6;
  position: fixed;
  bottom: 0;
  z-index: 99;
}

.content {
  margin-top: 2rpx;
  font-size: 26rpx;
  margin-left: 25rpx;
  margin-right: 25rpx;
}

.good_info {
  width: 100%;
  height: 206rpx;
  border-radius: 10rpx;
}

.money {
  display: flex;
  justify-content: space-start;
  margin-top: 16rpx;
}

.money_now {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30rpx;

}

.money_before {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 24rpx;
}

.maile {
  font-size: 24rpx;
  color: #d6d6d6;
  padding-top: 22rpx;
  margin-left: 350rpx;
}

.desc {
  margin-left: 30rpx;
  margin-top: 10rpx;
  display: flex;
  justify-content: space-start;
  align-items: start;
}

.desc_icon {
  width: 116rpx;
  height: 32rpx;
  margin-top: 8rpx;
}

.desc_title {
  font-size: 36rpx;
  font-weight: 560;
  margin-left: 25rpx;
  width: 520rpx;
  /** margin-right: 25rpx; **/
}

.jieshao {
  width: 100%;
  background-color: white;
}
</style>
